<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue'
import {  Close } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()
// 响应式数据
const activeCultureTab = ref(0)

const isHovering = ref(false)
let autoPlayTimer: NodeJS.Timeout | null = null

const cultureItems = ref([
  {
    title: '古保',
    description: '古籍保护与传承，维护家族珍贵文献资料，传承千年文化瑰宝',
    image: ''
  },
  {
    title: '民保',
    description: '民俗文化保护，传承家族传统习俗和礼仪，弘扬民族精神',
    image: ''
  },
  {
    title: '典博',
    description: '典籍博览，收藏和展示家族历史文献，记录家族辉煌历程',
    image: ''
  },
  {
    title: '百部',
    description: '百部经典，汇集家族重要典籍和著作，传承学术精神',
    image: ''
  },
  {
    title: '法律',
    description: '家族法规，制定和维护家族内部管理制度，规范家族秩序',
    image: ''
  }
])

const startAutoPlay = () => {
  if (autoPlayTimer) clearInterval(autoPlayTimer)
  autoPlayTimer = setInterval(() => {
    if (!isHovering.value) {
      activeCultureTab.value = (activeCultureTab.value + 1) % cultureItems.value.length
    }
  }, 4000)
}

const stopAutoPlay = () => {
  if (autoPlayTimer) {
    clearInterval(autoPlayTimer)
    autoPlayTimer = null
  }
}

const handleAccordionHover = (index: number) => {
  isHovering.value = true
  activeCultureTab.value = index
}

const handleAccordionLeave = () => {
  isHovering.value = false
}

onMounted(() => {
  startAutoPlay()
})

onUnmounted(() => {
  stopAutoPlay()
})

// 方法
const closeAnnouncement = () => {
  const announcement = document.querySelector('.announcement-section') as HTMLElement
  if (announcement) {
    announcement.style.display = 'none'
  }
}

const pauseMarquee = (index: number) => {
  const marqueeLines = document.querySelectorAll('.marquee-line span')
  if (marqueeLines[index]) {
    (marqueeLines[index] as HTMLElement).style.animationPlayState = 'paused'
  }
}

const resumeMarquee = (index: number) => {
  const marqueeLines = document.querySelectorAll('.marquee-line span')
  if (marqueeLines[index]) {
    (marqueeLines[index] as HTMLElement).style.animationPlayState = 'running'
  }
}

const goToMorePage = () => {
  // 这里可以使用路由跳转到更多页面
  router.push('/clanSearch')
  // 例如: router.push('/more')
}
</script>

<template>
  <div class="homePage">
    <!-- 首页 -->
     <section class="hero-banner" ref="heroBanner">
      <div class="hero-image">
        <img src="../../assests/photo/homeIndex.png" alt="家族祠堂" />
        <div class="hero-overlay">
          <div class="poem-container">
            <h1 class="poem-title">中源来</h1>
            <div class="poem-content">
              <p class="poem-line">族脉九重树，家声四海知。</p>
              <p class="poem-line">万派归宗处，长明世泽祠。</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 主要 -->
    <div class="homeContent">
      
    <!-- 公告区域 -->
    <section class="announcement-section">
      <div class="announcement-content">
        <span>公告内容（如果有公告，则弹出，没则消失）</span>
        <el-icon class="close-icon" @click="closeAnnouncement">
          <Close />
        </el-icon>
      </div>
    </section>

    <!-- 家族部分 -->
    <section class="family-section">
      <div class="section-header">
        <h2 class="section-title">家族</h2>
        <el-button type="primary" class="more-btn" @click="goToMorePage">更多</el-button>
      </div>
      <div class="family-content">
        <el-card class="family-card large-card" shadow="hover">
          <div class="card-content">
            <h3>寻根问祖</h3>
          </div>
        </el-card>
        <div class="family-right">
          <el-card class="family-card small-card" shadow="hover">
            <div class="card-content">
              <h3>家族文化</h3>
            </div>
          </el-card>
          <el-card class="family-card small-card" shadow="hover">
            <div class="card-content">
              <h3>家族传承</h3>
            </div>
          </el-card>
        </div>
      </div>
    </section>

    <!-- 理事会部分 -->
    <section class="council-section">
      <div class="section-header">
        <h2 class="section-title">理事会</h2>
        <el-button type="primary" class="more-btn" @click="goToMorePage">更多</el-button>
      </div>
      <div class="council-content">
        <el-card class="council-card tall-card" shadow="hover">
          <div class="card-content">
            <h3>管理多个家族</h3>
          </div>
        </el-card>
        <el-card class="council-card tall-card" shadow="hover">
          <div class="card-content">
            <h3>职位分明</h3>
          </div>
        </el-card>
        <el-card class="council-card square-card" shadow="hover">
          <div class="card-content">
            <h3>家族理事会机构</h3>
            <p>管理、严谨、高效</p>
          </div>
        </el-card>
      </div>
    </section>

    <!-- 家族文化部分 -->
    <section class="culture-section">
      <div class="section-header">
        <h2 class="section-title">家族文化</h2>
        <el-button type="primary" class="more-btn" @click="goToMorePage">更多</el-button>
      </div>
      <div class="culture-content">
        <div class="vertical-accordion">
          <div class="accordion-tabs">
            <div 
              v-for="(item, index) in cultureItems" 
              :key="index"
              :class="['tab-item', { active: activeCultureTab === index }]"
              @mouseenter="handleAccordionHover(index)"
              @mouseleave="handleAccordionLeave"
            >
              <div class="tab-title">{{ item.title }}</div>
              <div class="tab-content">
                <h3>{{ item.title }}</h3>
                <p>{{ item.description }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 家族家规部分 -->
    <section class="rules-section">
      <div class="section-header">
        <h2 class="section-title">家族家规</h2>
        <el-button type="primary" class="more-btn" @click="goToMorePage">更多</el-button>
      </div>
      <div class="rules-content">
        <div class="marquee-container">
          <div class="marquee-line" @mouseenter="pauseMarquee(0)" @mouseleave="resumeMarquee(0)">
            <span>家规第一条：尊老爱幼，孝敬父母，团结兄弟姐妹，和睦邻里</span>
          </div>
          <div class="marquee-line" @mouseenter="pauseMarquee(1)" @mouseleave="resumeMarquee(1)">
            <span>家规第二条：勤俭持家，诚实守信，勤奋学习，积极向上</span>
          </div>
          <div class="marquee-line" @mouseenter="pauseMarquee(2)" @mouseleave="resumeMarquee(2)">
            <span>家规第三条：遵纪守法，维护家族荣誉，传承优良家风</span>
          </div>
        </div>
      </div>
    </section>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  @import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap');

.homePage {
  min-height: 100vh;
  background: linear-gradient(135deg, #faf0e6 0%, #f5f5dc 100%);
}

// 首页横幅
.hero-banner {
  position: relative;
  min-height: 100vh;
  
  .hero-image {
    position: relative;
    width: 100%;
    height: 100%;
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .hero-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  
  .poem-container {
    text-align: center;
    color: rgb(128, 65, 65);
    
    .poem-title {
      font-family: 'Ma Shan Zheng', cursive;
      font-size: 12rem;
      margin-bottom: 2rem;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
      color: #b67c51;
    }
    
    .poem-content {
      .poem-line {
        font-family: 'Ma Shan Zheng', cursive;
        font-size: 4rem;
        margin: 1rem 0;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        opacity: 1;
        animation: fadeInUp 1s ease-out forwards;
        
        &:nth-child(1) { animation-delay: 0.5s; }
        &:nth-child(2) { animation-delay: 1s; }
        &:nth-child(3) { animation-delay: 1.5s; }
        &:nth-child(4) { animation-delay: 2s; }
      }
    }
  }
}

// 公告区域
.announcement-section {
  background: #F5F5F5;
  padding: 15px 20px;
  border-bottom: 1px solid #E0E0E0;
  
  .announcement-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #666;
    
    .close-icon {
      cursor: pointer;
      transition: transform 0.3s ease;
      
      &:hover {
        transform: rotate(90deg);
        color: #F56C6C;
      }
    }
  }
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto 40px;
  padding: 0 20px;
  
  .more-btn {
    background: linear-gradient(90deg, #8B4513, #D2691E);
    border: none;
    color: #F5DEB3;
    font-weight: bold;
    border-radius: 20px;
    padding: 8px 20px;
    transition: all 0.3s ease;
    
    &:hover {
      background: linear-gradient(90deg, #D2691E, #DAA520);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(139, 69, 19, 0.3);
    }
  }
}

// 通用部分样式
.section-title {
  font-size: 28px;
  color: #8B4513;
  font-family: 'KaiTi', serif;
  font-weight: bold;
  position: relative;
  margin: 0;
  
  &::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #DAA520, #8B4513);
    border-radius: 2px;
  }
}

// 家族部分
.family-section {
  padding: 80px 0;
  
  .family-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 20px;
    height: 400px;
  }
  
  .large-card {
    flex: 1;
    
    :deep(.el-card__body) {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #FFE4B5 0%, #DEB887 100%);
    }
  }
  
  .family-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .small-card {
    flex: 1;
    
    :deep(.el-card__body) {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #E6F3E6 0%, #C8E6C9 100%);
    }
  }
}

// 理事会部分
.council-section {
  padding: 80px 0;
  background: rgba(245, 222, 179, 0.3);
  
  .council-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 20px;
    height: 400px;
  }
  
  .tall-card {
    flex: 1;
    
    :deep(.el-card__body) {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #F0E68C 0%, #DAA520 100%);
    }
  }
  
  .square-card {
    width: 300px;
    
    :deep(.el-card__body) {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #DDA0DD, #DA70D6);
      
      h3 {
        margin-bottom: 10px;
      }
      
      p {
        font-size: 14px;
        color: #666;
      }
    }
  }
}

.culture-section {
  padding: 80px 0;
  
  .culture-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    
    .vertical-accordion {
      display: flex;
      height: 500px;
      background: #fff;
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      
      .accordion-tabs {
        display: flex;
        width: 100%;
        height: 100%;
        
        .tab-item {
          position: relative;
          cursor: pointer;
          transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
          overflow: hidden;
          display: flex;
          align-items: flex-end;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          
          // 默认宽度（收缩状态）
          flex: 0 0 80px;
          
          // 激活状态（展开）
          &.active {
            flex: 1;
          }
          
          // 背景图片
          &:nth-child(1) {
            background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.6)), url('https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-w3nekGTGDeoKFpXwEJR0mB0z9c5uSE.png');
          }
          &:nth-child(2) {
            background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.6)), url('');
          }
          &:nth-child(3) {
            background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.6)), url('');
          }
          &:nth-child(4) {
            background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.6)), url('');
          }
          &:nth-child(5) {
            background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.6)), url('');
          }
          
          // 标签标题
          .tab-title {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(74, 144, 164, 0.9);
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: bold;
            white-space: nowrap;
            transition: all 0.3s ease;
            z-index: 2;
          }
          
          // 内容区域
          .tab-content {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
            color: white;
            padding: 40px 30px 30px;
            transform: translateY(100%);
            transition: all 0.5s ease;
            z-index: 1;
            
            h3 {
              font-size: 24px;
              margin-bottom: 15px;
              font-weight: bold;
              color: #DAA520;
            }
            
            p {
              font-size: 16px;
              line-height: 1.6;
              opacity: 0.9;
            }
          }
          
          // 激活状态的样式
          &.active {
            .tab-title {
              background: rgba(218, 165, 32, 0.9);
              transform: translateX(-50%) scale(1.1);
            }
            
            .tab-content {
              transform: translateY(0);
            }
          }
          
          // 悬停效果
          &:hover:not(.active) {
            flex: 0 0 120px;
            
            .tab-title {
              background: rgba(218, 165, 32, 0.8);
              transform: translateX(-50%) scale(1.05);
            }
          }
        }
      }
    }
  }
}

// 家族家规部分
.rules-section {
  padding: 80px 0;
  background: rgba(200, 230, 201, 0.3);
  
  .rules-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    
    .marquee-container {
      background: rgba(255, 255, 255, 0.9);
      border-radius: 15px;
      padding: 30px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
      overflow: hidden;
    }
    
    .marquee-line {
      height: 50px;
      line-height: 50px;
      margin: 10px 0;
      overflow: hidden;
      white-space: nowrap;
      
      span {
        display: inline-block;
        animation: marquee 20s linear infinite;
        font-size: 16px;
        color: #5D4037;
        padding-left: 100%;
      }
      
      &:hover span {
        animation-play-state: paused;
      }
    }
  }
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

// 动画定义
@keyframes fadeInUp {
  0%{
    opacity: 25%;
    transform: translateY(30px);
  }
  25%{
    opacity: 50%;
    transform: translateY(20px);
  }
  50%{
    opacity: 75%;
    transform: translateY(10px);
  }
  75%{
    opacity:100%;
    transform: translateY(0);
  }
}

// 响应式设计
@media (max-width: 768px) {
  .family-grid,
  .council-grid {
    grid-template-columns: 1fr;
  }
  
  .footer-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .poem-container {
    .poem-title {
      font-size: 2.5rem;
    }
    
    .poem-line {
      font-size: 1.5rem;
    }
  }
}
</style>